<template>
  <div class="m-ball">
    <transition name="move"><span class="el-icon-remove m-minus" @click="minus" v-show="food.count > 0"></span></transition>
    <transition name="hide">
      <span class="m-count" v-show="food.count > 0">{{ food.count }}</span>
    </transition>
    <span class="el-icon-circle-plus m-add" @click="add"></span>
  </div>
</template>

<script>
export default {
  props: {
    food: {}
  },
  methods: {
    add(e) {
      this.food.count++;
      // 触发父组件cart-add 事件
      this.$emit('cart-add', e.target);
    },
    minus() {
      this.food.count--;
    }
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.m-ball
  font-size 0
  .m-minus
    font-size 20px
    padding 5px
    cursor pointer
    &.move-enter-active, &.move-leave-active
      transition all 0.3s linear
      transform translate3d(0, 0, 0)
    &.move-enter, &.move-leave-to
      transform translate3d(100%, 0, 0)
  .m-count
    font-size 14px
    height 20px
    line-height 20px
    padding 5px 0
    margin 0 10px
    &.hide-enter-active, &.hide-leave-active
      opacity 1
      transition all 0.3s linear
    &.hide-enter, &.hide-leave-to
      opacity 0
  .el-icon-circle-plus
    font-size 20px
    padding 5px
    cursor pointer
</style>
